<svg aria-hidden="true" id="9978b8a8-ff71-4bbf-b279-d82c522e95fa" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 832 300" focusable="false" tabindex="-1">
  <defs aria-hidden="true">
    <clipPath aria-hidden="true" id="335d9d4d-65c4-4f13-9f59-eba4d9fee526">
      <rect aria-hidden="true" x="459.9" y="64.7" width="49" height="49" style="fill:none"/>
    </clipPath>
  </defs>
  <title>This SVG contains an example of using fabric, the svg shows example code and the result after adding Fabric.</title>
  <g aria-hidden="true" id="9c6ea95c-876e-4c41-8f13-e83b4341669d" data-name="back">
    <rect width="832" height="300" style="fill:#00b7c3"/>
  </g>
  <g aria-hidden="true" id="ae88c816-e37e-41cf-b658-6f84e4a8a449" data-name="Layer 1">
    <text aria-hidden="true" transform="translate(592.95 81.18)" style="isolation:isolate;font-size:9.350000381469727px;fill:#767676;font-family:Myriad Pro"></text>
    <rect aria-hidden="true" x="199" y="52" width="187" height="193" style="fill:#393939"/>
    <path aria-hidden="true" d="M386,52V45c0-.7-0.3-2-1.5-2H200.7c-1.6,0-1.7,1.3-1.7,2v7H386Z" style="fill:#e6e6e6"/>
    <circle aria-hidden="true" cx="203.4" cy="47.8" r="1.4" style="fill:#fff"/>
    <circle aria-hidden="true" cx="209.1" cy="47.8" r="1.4" style="fill:#fff"/>
    <circle aria-hidden="true" cx="214.9" cy="47.8" r="1.4" style="fill:#fff"/>
    <rect aria-hidden="true" x="199" y="110" width="187" height="24" style="fill:#4c4a48"/>
    <text aria-hidden="true" transform="translate(223.49 124.43)" style="isolation:isolate;font-size:9.556300163269043px;fill:#fff;font-family:Segoe Print">&lt;</text>
    <path aria-hidden="true" d="M292.3,124.2v-1.4l3.3-1.1h0l-3.3-1.1v-1.4l4.6,1.9v1.1Z" style="fill:#fff"/>
    <rect aria-hidden="true" x="233" y="121" width="54" height="2" style="fill:#fff"/>
    <text aria-hidden="true" transform="translate(209.16 73.52)" style="isolation:isolate;font-size:9.556300163269043px;fill:#ee3b83;font-family:Segoe Print">&lt;</text>
    <text aria-hidden="true" transform="translate(218.21 74.37)" style="isolation:isolate;font-size:9.556300163269043px;fill:#ee3b83;font-family:Segoe Print">head</text>
    <text aria-hidden="true" transform="translate(245.41 73.52)" style="isolation:isolate;font-size:9.556300163269043px;fill:#ee3b83;font-family:Segoe Print">&gt;</text>
    <text aria-hidden="true" transform="translate(223.49 90.43)" style="isolation:isolate;font-size:9.556300163269043px;fill:#61d6d6;font-family:Segoe Print">&lt;</text>
    <path aria-hidden="true" d="M266.8,90.2V88.8l3.3-1.1h0l-3.3-1.1V85.2l4.6,1.9v1.1Z" style="fill:#61d6d6"/>
    <rect aria-hidden="true" x="233" y="87" width="28" height="2" style="fill:#61d6d6"/>
    <text aria-hidden="true" transform="translate(223.49 103.18)" style="isolation:isolate;font-size:9.556300163269043px;fill:#61d6d6;font-family:Segoe Print">&lt;</text>
    <path aria-hidden="true" d="M300.8,103v-1.4l3.3-1.1h0l-3.3-1.1V98l4.6,1.9V101Z" style="fill:#61d6d6"/>
    <rect aria-hidden="true" x="233" y="99" width="62" height="3" style="fill:#61d6d6"/>
    <text aria-hidden="true" transform="translate(209.16 149.17)" style="isolation:isolate;font-size:9.556300163269043px;fill:#ee3b83;font-family:Segoe Print">&lt;</text>
    <text aria-hidden="true" transform="translate(217.36 149.17)" style="isolation:isolate;font-size:9.556300163269043px;fill:#ee3b83;font-family:Segoe Print">/</text>
    <text aria-hidden="true" transform="translate(224.16 150.02)" style="isolation:isolate;font-size:9.556300163269043px;fill:#ee3b83;font-family:Segoe Print">head</text>
    <text aria-hidden="true" transform="translate(252.21 149.17)" style="isolation:isolate;font-size:9.556300163269043px;fill:#ee3b83;font-family:Segoe Print">&gt;</text>
    <text aria-hidden="true" transform="translate(209.04 166.93)" style="isolation:isolate;font-size:9.556300163269043px;fill:#61d6d6;font-family:Segoe Print">&lt;</text>
    <path aria-hidden="true" d="M254.1,166.7v-1.4l3.3-1.1h0l-3.3-1.1v-1.4l4.6,1.9v1.1Z" style="fill:#61d6d6"/>
    <rect aria-hidden="true" x="219" y="163" width="30" height="3" style="fill:#61d6d6"/>
    <text aria-hidden="true" transform="translate(234.54 192.43)" style="isolation:isolate;font-size:9.556300163269043px;fill:#fff;font-family:Segoe Print">&lt;</text>
    <path aria-hidden="true" d="M277.9,192.2v-1.4l3.3-1.1h0l-3.3-1.1v-1.4l4.6,1.9v1.1Z" style="fill:#fff"/>
    <rect aria-hidden="true" x="244" y="189" width="28" height="2" style="fill:#fff"/>
    <text aria-hidden="true" transform="translate(221.79 179.68)" style="isolation:isolate;font-size:9.556300163269043px;fill:#61d6d6;font-family:Segoe Print">&lt;</text>
    <path aria-hidden="true" d="M294.9,179.5v-1.4l3.3-1.1h0l-3.3-1.1v-1.4l4.6,1.9v1.1Z" style="fill:#61d6d6"/>
    <rect aria-hidden="true" x="232" y="176" width="57" height="2" style="fill:#61d6d6"/>
    <text aria-hidden="true" transform="translate(247.29 209.43)" style="isolation:isolate;font-size:9.556300163269043px;fill:#61d6d6;font-family:Segoe Print">&lt;</text>
    <path aria-hidden="true" d="M303.4,209.2v-1.4l3.3-1.1h0l-3.3-1.1v-1.4l4.6,1.9v1.1Z" style="fill:#61d6d6"/>
    <rect aria-hidden="true" x="257" y="206" width="41" height="2" style="fill:#61d6d6"/>
    <text aria-hidden="true" transform="translate(234.54 234.93)" style="isolation:isolate;font-size:9.556300163269043px;fill:#fff;font-family:Segoe Print">&lt;</text>
    <path aria-hidden="true" d="M260.9,234.7v-1.4l3.3-1.1h0l-3.3-1.1v-1.4l4.6,1.9v1.1Z" style="fill:#fff"/>
    <rect aria-hidden="true" x="244" y="231" width="11" height="3" style="fill:#fff"/>
    <text aria-hidden="true" transform="translate(247.29 222.18)" style="isolation:isolate;font-size:9.556300163269043px;fill:#ee3b83;font-family:Segoe Print">&lt;</text>
    <path aria-hidden="true" d="M320.4,222v-1.4l3.3-1.1h0l-3.3-1.1V217l4.6,1.9V220Z" style="fill:#ee3b83"/>
    <rect aria-hidden="true" x="256.8" y="218.5" width="58.2" height="2.5" style="fill:#ee3b83"/>
    <rect aria-hidden="true" x="446" y="52" width="187" height="193" style="fill:#fff"/>
    <path aria-hidden="true" d="M633,52V45a2.22,2.22,0,0,0-2-2H447.2c-1.6,0-1.2,1.3-1.2,2v7H633Z" style="fill:#e6e6e6"/>
    <circle aria-hidden="true" cx="449.9" cy="47.8" r="1.4" style="fill:#fff"/>
    <circle aria-hidden="true" cx="455.6" cy="47.8" r="1.4" style="fill:#fff"/>
    <circle aria-hidden="true" cx="461.4" cy="47.8" r="1.4" style="fill:#fff"/>
    <rect aria-hidden="true" x="453.2" y="65.6" width="170.6" height="95.9" style="fill:#fff"/>
    <path aria-hidden="true" d="M623,66.4v94.2H454.1V66.4H623m1.7-1.7H452.4v97.6H624.7V64.7h0Z" style="fill:#eee"/>
    <rect aria-hidden="true" x="454.1" y="64.7" width="168.8" height="49" style="fill:#f2f2f2"/>
    <rect aria-hidden="true" x="453.7" y="64.7" width="6.2" height="49" style="fill:#79db75"/>
    <text aria-hidden="true" transform="translate(517.15 82.86)" style="isolation:isolate;font-size:10.691399574279785px;fill:#393939;font-family:Segoe UI">
      J
      <tspan aria-hidden="true" x="3.25" y="0">ay Kirby</tspan>
    </text>
    <g aria-hidden="true" style="clip-path:url(#335d9d4d-65c4-4f13-9f59-eba4d9fee526)">
      <rect aria-hidden="true" x="459.9" y="64.7" width="49" height="49" style="fill:#e6e6e6"/>
      <path aria-hidden="true" id="b83ac884-9a80-4bb7-a6ac-38919fb0dc9a" data-name="&lt;Path&gt;" d="M471.4,105.5h25.7a9.47,9.47,0,0,1,9.4,9.5v7.9h-9.4v28.8H471.4V122.9H462V115A9.47,9.47,0,0,1,471.4,105.5Z" style="fill:#7ba7ff"/>
      <path aria-hidden="true" id="eb8da211-048a-40b8-a41e-a7ccc879bc85" data-name="&lt;Path&gt;" d="M493.9,84.5V80.4a8.83,8.83,0,0,0-8.9-8.8h-1.6a8.73,8.73,0,0,0-8.7,8.8v4.1h19.2Z" style="fill:#604123"/>
      <path aria-hidden="true" id="731c8d25-c0e2-4be8-99bf-fc1c7af7502f" data-name="&lt;Path&gt;" d="M472.5,91.1a1.16,1.16,0,0,0,1.2,1.2h21.1a1.08,1.08,0,0,0,1.1-1.2V88.5a1,1,0,0,0-1.1-1.1H473.7a1.08,1.08,0,0,0-1.2,1.1v2.6Z" style="fill:#c3986f"/>
      <polygon  aria-hidden="true" id="40ceca3a-0fd8-4eb2-bb0f-d982c0e811d7" data-name="&lt;Path&gt;" points="484.2 109.5 488.3 105.5 488.3 96.1 480.1 96.1 480.1 105.5 484.2 109.5" style="fill:#e0bb8d"/>
      <path aria-hidden="true" id="b89b240e-1e44-4722-a9f0-5d528ea65a65" data-name="&lt;Path&gt;" d="M488.3,102.6a12.91,12.91,0,0,1-4,.5,14.24,14.24,0,0,1-4.2-.5V96.1h8.2v6.5Z" style="fill:#c3986f"/>
      <path aria-hidden="true" id="220a8c2b-9ad2-4f26-b87d-7d67cafc522d" data-name="&lt;Path&gt;" d="M493.9,83.5v15h-0.1a15.46,15.46,0,0,1-9.4,3.2,16.35,16.35,0,0,1-9.7-3.2v-15s3.2-1.8,9.7-1.8S493.9,83.5,493.9,83.5Z" style="fill:#e0bb8d"/>
      <rect aria-hidden="true" id="58b73b4f-2524-471e-b638-1b9b30de7342" data-name="&lt;Path&gt;" x="492.3" y="82.2" width="1.5" height="10" style="fill:#604123"/>
      <rect aria-hidden="true" id="d9d111a5-81e4-4ec4-849b-d470f81ca163" data-name="&lt;Path&gt;" x="474.6" y="82.2" width="1.5" height="10" style="fill:#604123"/>
      <path aria-hidden="true" id="ffad81ee-d0e0-4e1b-919d-7af7ecd4bf40" data-name="&lt;Path&gt;" d="M479.8,89.9a0.77,0.77,0,0,1-.8.7,0.68,0.68,0,0,1-.7-0.7,0.77,0.77,0,0,1,.7-0.8A0.79,0.79,0,0,1,479.8,89.9Z" style="fill:#505050"/>
      <path aria-hidden="true" id="0299a9f7-d89a-4996-beeb-ff7cd5362241" data-name="&lt;Path&gt;" d="M490.2,89.9a0.68,0.68,0,0,1-.7.7,0.77,0.77,0,0,1-.8-0.7,0.86,0.86,0,0,1,.8-0.8A0.77,0.77,0,0,1,490.2,89.9Z" style="fill:#505050"/>
      <path aria-hidden="true" id="a634d9ca-0a23-4c0f-bab1-14adc50f110b" data-name="&lt;Path&gt;" d="M484.2,94.6a1.27,1.27,0,0,0,1.4-1.2H483A1.16,1.16,0,0,0,484.2,94.6Z" style="fill:#c3986f"/>
      <path aria-hidden="true" id="b6eba6ac-00a5-46ae-b1c4-bc8fbf756285" data-name="&lt;Path&gt;" d="M487,98.5a0.77,0.77,0,0,1-.7.8h-4.2a0.77,0.77,0,0,1-.7-0.8h0a0.77,0.77,0,0,1,.7-0.8h4.2A0.71,0.71,0,0,1,487,98.5Z" style="fill:#f2f2f2"/>
    </g>
    <polyline aria-hidden="true" points="624.7 143.5 471.9 143.5 465.9 137.5 460.8 143.5 452.4 143.5" style="fill:none;stroke:#e6e6e6;stroke-miterlimit:10;stroke-width:0.7307000160217285px"/>
    <text aria-hidden="true" transform="translate(517.15 95.81)" style="isolation:isolate;font-size:6.752399921417236px;fill:#767676;font-family:Segoe UI">
      Interior Designe
      <tspan aria-hidden="true" x="44.82" y="0">r</tspan>
      <tspan aria-hidden="true" x="46.25" y="0">, Contoso</tspan>
    </text>
    <g aria-hidden="true" style="isolation:isolate">
      <text aria-hidden="true" transform="translate(458.82 128.86)" style="isolation:isolate;font-size:11.050000190734863px;fill:#0075d9;font-family:office365icons"></text>
      <text aria-hidden="true" transform="translate(470.72 128.86)" style="isolation:isolate;font-size:11.050000190734863px;fill:#767676;font-family:office365icons;white-space:pre">   </text>
    </g>
    <rect aria-hidden="true" x="517" y="103" width="72" height="2" style="fill:#767676"/>
    <rect aria-hidden="true" x="458" y="151" width="29" height="3" style="fill:#767676"/>
    <rect aria-hidden="true" x="493.4" y="151.2" width="45.9" height="2.5" style="fill:#0075d9"/>
    <g aria-hidden="true" style="opacity:0.6000000238418579">
      <path aria-hidden="true" d="M366.9,277H218.6c-1.6,0-3,2.4-3,4s1.3,4,3,4H366.9c1.6,0,3-2.4,3-4S368.5,277,366.9,277Z" style="fill:#009ca4"/>
    </g>
    <g aria-hidden="true" style="opacity:0.6000000238418579">
      <path aria-hidden="true" d="M613.4,277H465.1c-1.6,0-3,2.4-3,4s1.3,4,3,4H613.4c1.6,0,3-2.4,3-4S615,277,613.4,277Z" style="fill:#009ca4"/>
    </g>
  </g>
</svg>